<template>
  <div class="page-wrap" data-title="订单列表页面">
    <div class="page-inner">
      <div class="section">
        <!-- <div class="sec-title">订单筛选</div> -->
        <div class="sec-ctx">
          <div class="filter-box">
            <div class="filter-item">
              <div class="filter-title">订单编号</div>
              <div class="filter-val">
                <el-input v-model="keyword" clearable placeholder="请输入"> </el-input>
              </div>
            </div>
            <div class="filter-item">
              <div class="filter-title">下单时间</div>
              <div class="filter-val">
                <el-date-picker
                  v-model="keyword"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </div>
            </div>
            <div class="filter-item">
              <div class="filter-title">收货人姓名</div>
              <div class="filter-val">
                <el-input v-model="keyword" clearable placeholder="请输入"> </el-input>
              </div>
            </div>
            <div class="filter-item">
              <div class="filter-title">收货人手机号</div>
              <div class="filter-val">
                <el-input v-model="keyword" clearable placeholder="请输入"> </el-input>
              </div>
            </div>
            <div class="btn-box">
              <el-button type="primary" @click="setView()"> 搜索 </el-button>
              <el-button type="default" @click="resetSearch()"> 重置 </el-button>
            </div>
          </div>
        </div>
      </div>

      <div class="section">
        <!-- <div class="sec-title">订单列表</div> -->

        <div class="sec-ctx">
          <div class="tab-wrap">
            <el-tabs v-model="activeName" @tab-click="tabClick">
              <el-tab-pane
                v-for="(item, index) in tabList"
                :key="index"
                :label="item.title"
                :name="item.name"
              >
              </el-tab-pane>
            </el-tabs>
          </div>

          <div class="data-list">
            <div class="table-box">
              <el-table
                ref="multipleTable"
                :data="productList"
                fit
                stripe
                border
                highlight-current-row
                min-width="100px"
                style="width: 100%"
              >
                <el-table-column prop="1" label="售后单编号" width="auto">
                  <template slot-scope="scope">
                    <div class="col-text">
                      {{ "sku编码" }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="2" label="售后类型" width="auto">
                  <template slot-scope="scope">
                    <div class="col-text">
                      {{ "sku编码" }}
                    </div>
                  </template>
                </el-table-column>

                <el-table-column prop="2" label="订单编号" width="auto">
                  <template slot-scope="scope">
                    <div class="col-text">
                      {{ "sku编码" }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="2" label="用户昵称" width="auto">
                  <template slot-scope="scope">
                    <div class="col-text">
                      {{ "sku编码" }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="2" label="状态" width="auto">
                  <template slot-scope="scope">
                    <div class="col-text">
                      {{ "sku编码" }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="2" label="申请时间" width="auto">
                  <template slot-scope="scope">
                    <div class="col-text">
                      {{ "sku编码" }}
                    </div>
                  </template>
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="100px">
                  <template slot-scope="scope">
                    <div class="col-text">
                      <el-button type="text" @click="$router.push('/refund-detail?id=')">
                        查看
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="pagi-box">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagination.pageNums"
              :page-sizes="[10, 20, 50, 100, 200]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, slot, next, jumper"
              :total="total"
              :pager-count="5"
            >
              <span class="cus-current-page">
                <span> {{ pagination.pageNum }}/{{ totalPage }} </span>
              </span>
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "news",
  components: {},

  data() {
    return {
      productList: [],
      activeName: "全部",
      keyword: "",

      pagination: {
        page: 1,
        pageSize: 10,
      },
      total: 0,

      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  computed: {
    tabList() {
      return [
        { title: "全部", name: "全部" },
        { title: "未处理", name: "未处理" },
        { title: "已处理", name: "已处理" },
      ];
    },
  },
  watch: {},
  created() {
    this.setView();
  },
  mounted() {},
  methods: {
    setView() {
      this.$api({
        url: "/app/news/information/list",
        method: "get",
        data: {},
      }).then((res) => {
        // console.warn("新闻详情", res);
        if (res.code == 200) {
          let dataList = res.rows;

          this.productList = dataList;
        }
      });
    },

    resetSearch() {},

    tabClick() {},

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);

      this.pagination.pageSize = val;
      this.setView();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

      this.pagination.pageNum = val;

      this.setView();
    },
    //分页
  },
};
</script>

<style scoped lang="less">
.page-wrap {
  .page-inner {
  }
}

.section {
  margin-bottom: 10px;
  background: #fff;
  padding: 20px;
  border-radius: 6px;
}

.sec-title {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: bold;
}
.sec-ctx {
}

.filter-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .btn-box {
    margin-bottom: 15px;
  }
  .filter-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    margin-right: 30px;
    .filter-title {
      margin-right: 15px;
    }
    .filter-val {
    }
  }
}

// 商品信息
.order-list {
  .order-title-box {
    margin-bottom: 20px;
    display: flex;
    color: #44434b;
    padding: 12px 0;
    padding-top: 17px;
    height: 46px;
    background: rgba(208, 214, 228, 0.2);
    font-weight: 700;

    .sub {
      flex: 1;
    }
    .sub:nth-child(1) {
      flex: 3;

      .text {
        padding-left: 20px;
      }
    }
    .sub:nth-child(2) {
    }
    .sub:nth-child(3) {
    }
    .sub:nth-child(4) {
    }
    .sub:nth-child(5) {
    }
    .sub:nth-child(6) {
    }
    .sub:nth-child(7) {
    }
  }
  .order-item {
    margin-bottom: 20px;
    border: 1px solid #d0d6e4;
    border-radius: 10px;

    .item-top {
      display: flex;
      color: #44434b;
      padding: 12px 20px;
      padding-top: 17px;
      height: 46px;
      background: rgba(208, 214, 228, 0.2);
      font-weight: 700;

      .t-left {
        .flex();
        .divider {
          width: 1px;
          height: 14px;
          background: #ccc;
          margin: 0 15px;
        }
      }
      .t-right {
        margin-left: 30px;
      }
    }
    .item-bottom {
      display: flex;
      align-items: center;

      .sub {
        flex: 1;
      }
      .sub:nth-child(1) {
        flex: 4;
      }
      .sub:nth-child(2) {
      }
      .sub:nth-child(3) {
      }
      .sub:nth-child(4) {
      }
      .sub:nth-child(5) {
      }
      .sub:nth-child(6) {
      }
      .sub:nth-child(7) {
      }
    }

    .product-box {
      padding-left: 15px;
      .product-item {
        position: relative;
        display: flex;
        align-items: center;
        padding: 10px;

        & + .product-item {
          &::before {
            position: absolute;
            top: 0;
            content: "";
            width: calc(100% - 70px);
            height: 1px;
            background: #ddd;
          }
        }

        .img-box {
          flex: 1;
        }
        .title-box {
          flex: 2;
          .title {
            margin-bottom: 10px;
            color: #655eff;
            cursor: pointer;
          }
          .guige {
          }
        }
        .shuliang-box {
          flex: 1;
          .price {
            margin-bottom: 15px;
          }
          .num {
          }
        }
      }
    }
  }
}

.pagi-box {
  margin-top: 20px;
  text-align: right;
}
</style>
